<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/amazeui.min.js"></script>
<script src="../assets/js/app.js"></script>
<script src="../assets/js/echarts.min.js"></script>
</head>
<body>
    <div style="width: 600px;height:600px;" id="dataViewDiv" class="">
      
    </div>
</body>
<script type="text/javascript">
var dataViewDiv = echarts.init(document.getElementById('dataViewDiv'));
var upColor = '#ec0000';
var upBorderColor = '#8A0000';
var downColor = '#00da3c';
var downBorderColor = '#008F28';

var dataCount = 2e3;
var data = generateOHLC(dataCount);

var option = {
	    dataset: {
	        source: {[
	  	            // 每一列称为一个『维度』。
		            // 这里分别是维度 0、1、2、3、4。
		            [1,10],[2,31]
		        ],[
		            // 每一列称为一个『维度』。
		            // 这里分别是维度 0、1、2、3、4。
		            [2,28],[1,15]
		        ]}
	    },
    legend: {
        data:['2015 降水量', '2016 降水量', '2017 降水量', '2018 降水量', '2019 降水量']
    },
    title: {
        text: 'Data Amount: ' + echarts.format.addCommas(dataCount)
    },
    tooltip: {
        trigger: 'none',
        axisPointer: {
            type: 'cross'
        }
    },
    toolbox: {
        feature: {
            dataZoom: {
                yAxisIndex: false
            },
        }
    },
    grid: [
        {
            left: '10%',
            right: '10%',
            bottom: 200
        }
    ],
    xAxis: [
        {
            type: 'category',
            axisTick: {
                alignWithLabel: true
            },
            axisLine: {
                onZero: false,
            },
            axisPointer: {
                label: {
                    formatter: function (params) {
                        return '降水量  ' + params.value
                            + (params.seriesData.length ? '：' + params.seriesData[0].data : '');
                    }
                }
            },
            scale: true,
            boundaryGap : false,
            // inverse: true,
            axisLine: {onZero: false},
            splitLine: {show: false},
            splitNumber: 20,
            min: 'dataMin',
            max: 'dataMax'
        }
    ],
    yAxis: [
        {
            scale: true,
            splitArea: {
                show: true
            }
        }
    ],
    dataZoom: [
        {
            type: 'inside',
            xAxisIndex: [0],
            start: 10,
            end: 100
        },
        {
            show: true,
            xAxisIndex: [0],
            type: 'slider',
            bottom: 10,
            start: 10,
            end: 100,
            handleIcon: 'M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '105%'
        }
    ],
    visualMap: {
        show: false,
        seriesIndex: 0,
        dimension: 6,
        pieces: [{
            value: 1,
            color: upColor
        }, {
            value: -1,
            color: downColor
        }]
    },
/*     [12, 44, 55, 66, 2],
    [23, 6, 16, 23, 1] */
    series: {
    	name:0,
        type: 'line',
        encode: {
            x: [0],      // 表示维度 3、1、5 映射到 x 轴。
            y: [1],              // 表示维度 2 映射到 y 轴。
        }
    }
};

function generateOHLC(count) {
    var data = [];

    var xValue = +new Date(2011, 0, 1);
    var minute = 60 * 1000;
    var baseValue = Math.random() * 12000;
    var boxVals = new Array(4);
    var dayRange = 12;

    for (var i = 0; i < count; i++) {
        baseValue = baseValue + Math.random() * 20 - 10;

        for (var j = 0; j < 4; j++) {
            boxVals[j] = (Math.random() - 0.5) * dayRange + baseValue;
        }
        boxVals.sort();

        var idxRandom = Math.random();
        var openIdx = Math.round(Math.random() * 3);
        var closeIdx = Math.round(Math.random() * 2);
        if (closeIdx === openIdx) {
            closeIdx++;
        }
        var volumn = boxVals[3] * (1000 + Math.random() * 500);

        // ['open', 'close', 'lowest', 'highest', 'volumn']
        // [1, 4, 3, 2]
        data[i] = [
            echarts.format.formatTime('yyyy-MM-dd\nhh:mm:ss', xValue += minute),
            +boxVals[openIdx].toFixed(2), // open
            +boxVals[3].toFixed(2), // highest
            +boxVals[0].toFixed(2), // lowest
            +boxVals[closeIdx].toFixed(2),  // close
            volumn.toFixed(0),
            getSign(data, i, +boxVals[openIdx], +boxVals[closeIdx], 4) // sign
        ];
    }

    return data;

    function getSign(data, dataIndex, openVal, closeVal, closeDimIdx) {
        var sign;
        if (openVal > closeVal) {
            sign = -1;
        }
        else if (openVal < closeVal) {
            sign = 1;
        }
        else {
            sign = dataIndex > 0
                // If close === open, compare with close of last record
                ? (data[dataIndex - 1][closeDimIdx] <= closeVal ? 1 : -1)
                // No record of previous, set to be positive
                : 1;
        }

        return sign;
    }
}
dataViewDiv.setOption(option);
$('#my-popup').modal(); 
</script>
</html>